---
import RootLayout from "layouts/RootLayout.astro";
import type { GetStaticPaths } from "astro";
import { render } from "astro:content";
import { getCollection, getEntry } from "astro:content";
import DocSideBar from "~/components/navigation/DocSideBar.astro";
import Drawer from "~/components/drawer/Drawer.astro";

export const getStaticPaths = (async () => {
  const pages = await getCollection("docs");
  return pages.map((page) => ({
    params: {
      slug: page.id,
    },
    props: {
      page: page,
    },
  }));
}) satisfies GetStaticPaths;

const { page } = Astro.props;
const { Content, remarkPluginFrontmatter } = await render(page);

let meta: Awaited<ReturnType<typeof getEntry>>;
if (page.id.startsWith("components/") || page.id.startsWith("integrations/")) {
  meta = await getEntry("docs", page.id.replace(/\/[^/]*$/, "/meta"));
  if (meta !== undefined) {
    Object.assign(remarkPluginFrontmatter, meta.data);
  }
}
---

<RootLayout
  metadata={{
    title: `Docs | ${page.data.title}`,
    description: page.data.description,
  }}
>
  <Drawer class="fixed top-3 left-2 z-50 md:hidden">
    <DocSideBar />
  </Drawer>
  <Content />
</RootLayout>
